@use "everything" as *;

$line-size: 2px;

.container {
  @include icon-use-var(width, size);

  display: inline-block;
  position: relative;

  &::before,
  &::after {
    @include pseudo-element($inset: null);
    @include theme-use-var(background-color, text-hint-color);

    left: 0.5rem;
    top: 0;
    transform: translateY(-50%);

    @include rtl {
      left: auto;
      right: 0.5rem;
    }
  }

  &::before {
    height: calc(
      list-get-var(item-height) - calc(
          list-get-var(item-vertical-padding) * 2
        ) -
        0.5rem
    );
    width: $line-size;
  }

  &::after {
    height: $line-size;
    width: 1.125rem;
  }
}

.last::before {
  transform: scaleY(-50%) translateY(150%);
}
